<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Bootstrap -->
    <link href="../../style/bootstrap-4.6.0-dist/css/bootstrap.css" rel="stylesheet">
</head>
<style>
    #add_btn2 {
        width: 85px;
        height: 38px;
        color: white;
        background: #f58f98;
    }
    #customerDriverNo, #companyName, #companyAddress, #phone{
        width: 300px;
        display: inline-block;
        margin-top: 10px;
    }
    label{
        width: 96px;
    }
    #customer_form2{
        margin-left: 15px;
    }
    label{
        font-weight: bold;
    }
    #return_btn {
        width: 85px;
        height: 38px;
        color: white;
        background: #fd7e14;
        margin-left: 35px;
    }
</style>
<body>

<div id="customer_div">
    <form id="customer_form2">

        <label>客户编号：</label>
        <input id="customerDriverNo" name="customerDriverNo" class="form-control" type="text"><br>
        <label>公司名称：</label>
        <input id="companyName" class="form-control" type="text" name="companyName"><br>
        <label>公司地址：</label>
        <input id="companyAddress" class="form-control" type="text" name="companyAddress"><br>
        <label>信用度：</label>
        <input class="companyCredit" type="radio" name="companyCredit" value="1">良好
        <input class="companyCredit" type="radio" name="companyCredit" value="2">差<br>
        <label>联系方式：</label>
        <input id="phone" maxlength="11" minlength="11" class="form-control" type="text" name="phone"
               onblur="javascript:if (this.value.length!=11){alert('手机号必须为11位,当前为'+this.value.length);} "><br>

        <button type="button" @click="addCus" id="add_btn2">保存</button>
        <button type="button" id="return_btn" @click="returnCustomerList">返回</button>
    </form>

</div>


<script src="../../style/jquery-3.3.1.js"></script>
<script src="../../style/vue.js"></script>
<script src="../../style/bootstrap-4.6.0-dist/js/bootstrap.js"></script>
<script>
    $(function (json) {
        let app = new Vue({
            el: "#customer_div",
            data: json,
            methods:{
                addCus:function (){
                    $.ajax({
                        type:"post",
                        url: "../../Customer/addCustomer",
                        data:$("#customer_form2").serialize(),//表单传值
                        dataType: "json",
                        success:function (data){
                            if(data.message=='添加成功'){
                                alert("添加成功");
                                location.href="customer_list.html";
                            }

                        }
                    })
                },
                returnCustomerList:function (){
                    location.href="customer_list.html";
                }
            }
        })
    })
</script>
</body>
</html>